<!-- Created by mhy on 2018/6/27.

 -->
<template>

  <div class="frame-new-page" style="background-color: #F2F2F2">
    <div class="frame-header">
    </div>
    <div class="frame-content">
      <div class="frame-left">
        <div class="frame-left-dist" ></div>
        <p class="frame-left-add-factory" style="color: #303641">场景ID号：{{this.$route.query.id}}</p>
        <div class="frame-left-dist" style="margin-top: 20px"></div>
        <m-select v-model="value1" :options="options1" title="分类" class="m-mb-10"/>
        <m-select v-model="value2" :options="options2" title="状态" class="m-mb-10"/>
        <m-select v-model="value3" :options="options3" title="付费类型" class="m-mb-10"/>
        <button class="frame-left-operation" style="background-color: #39B866;color: white;" @click="save">保存</button>
        <button class="frame-left-operation"
                style="margin-top: 30px;color: white;background-color: #E64340;border: #050505 solid 0.3pt;"
                @click="close">删除
        </button>
      </div>
      <div class="frame-right">
        <div class="frame-right-header">
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-img-sep">
          <div class="frame-right-radious">
            <div class="title-warning" style="height: 0;margin: 0">
              <p class="upload-img-title">*底图：</p>
              <p class="warining-radious" ref="war1"></p>
              <p class="img-info" ref="info1"></p>
            </div>
            <div class="frame-right-img-content" style="background-color: white">
              <img :src="imgUrlArray[0]" ref="img1" class="img-show">
              <p class="img-sign" ref="img-sign1">上传</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput1"
                @change="onChange($event, 1)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
            </div>
          </div>
          <div class="frame-right-radious">
            <div class="title-warning" style="height: 0;margin: 0">
              <p class="upload-img-title">覆盖图：</p>
              <p class="warining-radious" ref="war2"></p>
              <p class="img-info" ref="info2"></p>
            </div>
            <div class="frame-right-img-content" style="background-color: white">
              <img :src="imgUrlArray[1]" ref="img2" class="img-show">
              <p class="img-sign" ref="img-sign3">上传</p>
              <picture-input
                class="upload-wrapper"
                ref="pictureInput2"
                @change="onChange($event, 2)"
                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
                :crop="false"
                size="200">
              </picture-input>
              <p class="img-sign" style="background-color: red;color: white;right: 100px" @click="deleteImg(2)" ref="img-delete-sign13">删除</p>
            </div>
          </div>
        </div>
        <div class="frame-right-mode">
          <p class="frame-right-mode-title">*名称（必填）</p>
          <input class="frame-right-mode-input" maxlength="30" v-model="infoname" placeholder="请输入名称，30个字符以内">
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*底图定位（x轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo1">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*底图定位（y轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo2">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*安全区（x轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo3">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*安全区（y轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo4">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*安全区（宽）px</p>
            <input class="frame-right-mode-input" v-model="subinfo5">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*安全区（高）px</p>
            <input class="frame-right-mode-input" v-model="subinfo6">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*最佳展示区（x轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo7">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*最佳展示区（y轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo8">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*最佳展示区（宽）px</p>
            <input class="frame-right-mode-input" v-model="subinfo9">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*最佳展示区（高）px</p>
            <input class="frame-right-mode-input" v-model="subinfo10">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标尺（x轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo11">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标尺（y轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo12">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标尺（宽）px</p>
            <input class="frame-right-mode-input" v-model="subinfo13">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标尺（高）px</p>
            <input class="frame-right-mode-input" v-model="subinfo14">
          </div>
        </div>
        <div class="frame-right-double">
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标尺现实尺寸（x轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo15">
          </div>
          <div class="frame-right-mode" style="width: 48%;margin-top: 0px">
            <p class="frame-right-mode-title">*标现实尺寸尺（y轴坐标）px</p>
            <input class="frame-right-mode-input" v-model="subinfo16">
          </div>
        </div>
        <div class="frame-right-footer">
        </div>
      </div>
    </div>
    <div v-show="bindfactory" class="bind-factory">

    </div>
  </div>
</template>

<script>
  import PictureInput from '../../components/PictureInput.vue'
  import {mapActions, mapState} from 'vuex'

  export default {
    data() {
      return {
        value1: '0',
        value2: '0',
        value3: '0',
        options1: [{value: '1', label: '卧室'}, {value: '2', label: '客厅'}, {value: '3', label: '展厅'}],
        options2: [{value: '1', label: '上架'}, {value: '2', label: '下架'}],
        options3: [{value: '1', label: 'VIP'}, {value: '2', label: '免费'}],
        infoname: '',
        subinfo1: '',
        subinfo2: '',
        subinfo3: '',
        subinfo4: '',
        subinfo5: '',
        subinfo6: '',
        subinfo7: '',
        subinfo8: '',
        subinfo9: '',
        subinfo10: '',
        subinfo11: '',
        subinfo12: '',
        subinfo13: '',
        subinfo14: '',
        subinfo15: '',
        subinfo16: '',
        imgUrlArray: ["", ""],
        bindfactory: false,
        uploadImgCount: 2,
        imgid: '',
      }
    },
    components: {
      PictureInput
    },
    mounted () {
      this.$store.state.navTitle = '场景信息'
      this.refresh()
    },
    beforeRouteEnter(to, from, next) {
      next( (self) => {
        self.refresh()
      })
    },
    methods: {
      ...mapActions([
        'updateSence',
        'uploadSence',
        'getSenceDetail'
      ]),
      deleteImg(i){
        let imgShow = this.$refs['img' + i]
        imgShow.src = ''
        let oFile = this.$refs['pictureInput' + i]
        oFile.removeImage()
        this.imgUrlArray[i - 1] = ''
      },
      onChange (rotate, i) {
        // rotate：拿到需旋转的角度,如果不需要旋转值为false
        // this.$refs.pictureInput.file拿到file对象
        let self = this
        let oFile = this.$refs['pictureInput' + i]['file']
        // let imgCode = this.$refs['pictureInput' + i]['image']
        let oReader = new FileReader()
        oReader.readAsDataURL(oFile)
        oReader.onloadend = function () {
          let data = {}
          let img = document.createElement('img')
          img.onload = function () {
//            self.$store.state.uploadData.uploadImages[i] = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate)
            /* // 测试：显示画布旋转后的图
             let imgShow1 = self.$refs['test']
             imgShow1.src = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate) */
          }
          img.src = this.result
          // 显示样式图片到框内
          let imgShow = self.$refs['img' + i]
          imgShow.src = this.result
          imgShow.onload = function () {
//            if (imgShow.width > imgShow.height) {
//              imgShow.style.cssText = 'height: 100%'
//            } else {
            imgShow.style.cssText = 'width: 100%'
//            }
          }
//          self['show' + i] = false
        }
      },
      refresh(){
        let params = {action: "get", id: this.$route.query.id}
        this.getSenceDetail(params)
          .then(data => {
            if (data.result.type == '卧室') {
              this.value1 = '1'
            } else if (data.result.type == '客厅') {
              this.value1 = '2'
            } else if (data.result.type == '展厅') {
              this.value1 = '3'
            }
            if (data.result.paytype == '免费') {
              this.value3 = '2'
            } else if (data.result.paytype == 'VIP') {
              this.value3 = '1'
            }
            if (data.result.state == '上架') {
              this.value2 = '1'
            } else if (data.result.state == '下架') {
              this.value2 = '2'
            }
            this.infoname = data.result.name
            let info = JSON.parse(data.result.info)
//            info = JSON.parse(info)
            this.imgUrlArray[0] = info.dt
            this.imgUrlArray[1] = info.fgt
            this.subinfo1 = info.dtdwx
            this.subinfo2 = info.dtdwy
            this.subinfo3 = info.aqqx
            this.subinfo4 = info.aaqy
            this.subinfo5 = info.aaqwidth
            this.subinfo6 = info.aaqheight
            this.subinfo7 = info.zjzsqx
            this.subinfo8 = info.zjzsqy
            this.subinfo9 = info.zjzsqwidth
            this.subinfo10 = info.zjzsqheight
            this.subinfo11 = info.bcx
            this.subinfo12 = info.bcy
            this.subinfo13 = info.bcwidth
            this.subinfo14 = info.bcheight
            this.subinfo15 = info.bcxsccx
            this.subinfo16 = info.bcxsccy
          })
      },
      save(){
        //验证信息
//        for (var i = 1; i <= 2; i ++){
//          let oFile = this.$refs['pictureInput' + i]['file']
//          if(!oFile){
//            this.$dialog.toast({
//              mes:'请先上传所有必需的图片（带*标识）',
//              timeout: 1000
//            })
//            return
//          }
//        }
//        if(this.value1 == '0' || this.value3 == '0' || this.value2 == '0'){
//          this.$dialog.toast({
//            mes:'请先选择左侧的重要选项',
//            timeout: 1000
//          })
//          return
//        }
//        if(this.infoname.length == 0 || this.subinfo1.length == 0 || this.subinfo2.length == 0 || this.subinfo3.length == 0|| this.subinfo4.length == 0|| this.subinfo5.length == 0|| this.subinfo6.length == 0|| this.subinfo7.length == 0|| this.subinfo8.length == 0|| this.subinfo9.length == 0|| this.subinfo10.length == 0|| this.subinfo11.length == 0|| this.subinfo12.length == 0|| this.subinfo13.length == 0|| this.subinfo14.length == 0|| this.subinfo15.length == 0|| this.subinfo16.length == 0){
//          this.$dialog.toast({
//            mes:'请先填写必要信息',
//            timeout: 1000
//          })
//          return
//        }

        this.$dialog.loading.open('保存中，请稍后')
        var fileChanged = false
        for (var i = 1; i <= 2; i++) {
          let oFile = this.$refs['pictureInput' + i]['file']
          if (oFile) {
            fileChanged = true
          }
        }
        if (!fileChanged) {
          this.saveNext()
        } else {
          this.upload(1)
        }
      },
      upload(i){
          //最后一张图片已经操作结束
        if(i == this.uploadImgCount + 1){
          this.saveNext()
          return
        }
        let oFile = this.$refs['pictureInput' + i]['file']
        if (!oFile) {
          i += 1
          this.upload(i)
          return
        }
        var form = new FormData();
        form.append('file', oFile)
        this.uploadSence(form)
          .then(data => {
            this.imgUrlArray[i - 1] = data.result.url
              i += 1;
              this.upload(i)
          })
          .catch(err => {
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes: '图片上传失败，请重新尝试',
              timeout: 1000
            })
            return
          })
      },
      saveNext(){
        let info = {
          dt: this.imgUrlArray[0],
          fgt: this.imgUrlArray[1],
          dtdwx: this.subinfo1,
          dtdwy: this.subinfo2,
          aqqx: this.subinfo3,
          aaqy: this.subinfo4,
          aaqwidth: this.subinfo5,
          aaqheight: this.subinfo6,
          zjzsqx: this.subinfo7,
          zjzsqy: this.subinfo8,
          zjzsqwidth: this.subinfo9,
          zjzsqheight: this.subinfo10,
          bcx: this.subinfo11,
          bcy: this.subinfo12,
          bcwidth: this.subinfo13,
          bcheight: this.subinfo14,
          bcxsccx: this.subinfo15,
          bcxsccy: this.subinfo16

        }
        info = JSON.stringify(info)
//        info = JSON.stringify(info)
        let detail = {
          action: 'update',
          type: this.options1[Number(this.value1) - 1].label,
          state: this.options2[Number(this.value2) - 1].label,
          paytype: this.options3[Number(this.value3) - 1].label,
          id: this.$route.query.id,
          name: this.infoname,
          info: info,
          createtime: Date.now()
        }

        this.updateSence(detail)
          .then(data => {
            this.refresh()
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes: '场景保存成功',
              icon: 'success',
              timeout: 1000
            })
          })
          .catch(err => {
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes: '场景保存失败',
              icon: 'fail',
              timeout: 1000
            })
          })
      },

      close(){
        //        this.$dialog.confirm({
//          title: '提示',
//          mes: '是否要删除此框条？',
//          opts: () => {
//
//          }
//        });
                this.$dialog.confirm({
          title: '提示',
          mes: '是否要删除此场景？',
          opts: () => {
                    let params = {action:"delete",id:this.$route.query.id}
                    this.updateSence(params)
                    .then(data => {
                    this.$dialog.toast({
                    mes: '场景已删除',
                    icon: 'success',
                    timeout: 1000
                  })
        this.$router.go(-1);
      })
          }
        });



      }
    },

  }
</script>

<style scoped>
  .frame-right-double {
    width: 90%;
    height: 77px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 0px;
    margin-top: 30px;
  }
  input{
    background-color: white;
  }
  .img-color-sign {
    font-size: 12px;
    color: white;
    background-color: #39B866;
    position: absolute;
    right: 100px;
    bottom: 10px;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin: 0;
  }

  .img-dist {
    width: 100%;
    height: 1px;
    background-color: #C8C8C9;
    margin-top: 18px;
  }

  .last-img {
    width: 90%;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .m-mb-10 {
    margin-top: 20px;
  }

  .sub-img {
    width: 100% !important;
    height: 100px !important;
    margin-top: 10px !important;
  }

  .warining-radious {
    font-size: 12px;
    color: red;
    margin-left: 20px;
  }

  .img-info {
    font-size: 12px;
    color: #303641;
    margin-left: auto;
  }

  .img-mode {
    margin-top: 22px;
    margin-bottom: 19px;
  }

  .title-warning {
    /*width: 200%;*/
    display: flex;
    display: -webkit-flex;
    margin-top: 20px;
    height: 17px;
  }

  .img-aroud {
    width: 100%;
    padding-left: 10pt;
    padding-right: 10pt;
    height: 325px;
    background-color: white;
    border: 1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    /*align-items: c;*/

  }

  .frame-right-img-size {
    width: 90%;
    height: 325px;
  }

  .upload-wrapper {
    width: 100%;
    height: 100%;
    /*background-color: aqua;*/
    position: absolute;
    left: 0;
    top: 0;
  }

  .frame-right-img-content {
    width: 350px;
    height: 350px;
    background-color: white;
    margin-top: 20pt;
    position: relative;
  }

  .img-show {
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    /*background-color: aqua;*/
  }

  .img-sign {
    font-size: 12px;
    color: white;
    background-color: #39B866;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin: 0;
  }

  .upload-img-title {
    font-size: 12px;

  }

  .frame-right-radious {
    width: 350px;
    height: 377px;
    /*display: flex;*/
    /*display: -webkit-flex;*/
    /*justify-content: space-between;*/
  }

  .frame-right-img-sep {
    width: 90%;
    margin-top: 30px;
    height: 377px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  body {
    background-color: #F2F2F2;
  }

  /*顶部*/
  .frame-header {
    width: 100%;
    height: 100px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }

  /*内容*/
  .frame-content {
    width: 100%;
    display: flex;
    display: -webkit-flex;
  }

  /*左边*/
  .frame-left {
    width: 30%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }

  .frame-left-add-factory {
    color: #39B866;
    font-size: 12px;
    align-self: flex-start;
    margin-top: 20px;
    margin-left: 10%;
  }

  .frame-left-operation {
    font-size: 16px;
    width: 80%;
    height: 50px;
    border-radius: 3pt;
    border: 0;
    margin-top: 30px;
  }

  input::-ms-input-placeholder {
    text-align: left;
  }

  input::-webkit-input-placeholder {
    text-align: left;
  }

  .frame-left-dist {
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
  }

  .frame-left-category {
    margin: 5pt;
    width: 80%;
    height: 25pt;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1pt;
    border-color: #C8C8C8;
  }

  .category-title {
    margin-left: 10pt;
    font-size: 7pt;
    color: #303641;
  }

  .category-value {
    margin-right: 10pt;
    font-size: 7pt;
  }

  /*右边*/
  .frame-right {
    width: 70%;
    height: 2000px;
    /*background-color: white;*/
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .frame-right-mode {
    width: 90%;
    height: 77px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 0px;
    margin-top: 30px;
  }

  .frame-right-mode-title {
    color: #303641;
    font-size: 12px;
    /*margin-top: 22px;*/
    /*margin-bottom: 19px;*/
  }

  .frame-right-mode-input {
    width: 100%;
    height: 50px;
    text-align: left;
    padding-left: 10pt;
    border: 1px solid #C8C7CC;
    line-height: 30pt;
    font-size: 14px;
  }

  .frame-right-dist {
    width: 90%;
    height: 1px;
    margin-top: 0px;
    padding-bottom: 30px;
    padding: 0;
    background-color: #C8C8C9;
  }

  .frame-right-header {
    height: 0px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }

  .frame-right-footer {
    width: 90%;
    height: 40pt;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }


</style>
